<template>
	<view class="container">
		<u-navbar left-icon="search" left-icon-size="30" @leftClick="onClickLeft" title="Main Home"></u-navbar>
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" easing-function="linear" :style="{marginTop: marginSwiperHeight}">
			<swiper-item class="swiper-item" v-for="item in lbtList" :key="item.id">
				<image class="swiper-image" :src="item.imgUrl" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="categories">
			<view class="title">
				<text class="left-word">Categories</text>
				<text class="right-word">See All</text>
			</view>
			<view class="list">
				<view class="icon" v-for="item in iconList" :key="item.id">
					<view class="icon-item" :style="{backgroundColor: item.bgcColor}">
						<image :src="item.imgUrl" mode="" class="icons"></image>
					</view>
					<text class="name">{{ item.title }}</text>
				</view>
			</view>
		</view>
		<view class="latestSales">
			<view class="title">
				<text class="left-word">Latest Sales</text>
			</view>
			<view class="list">
				<scroll-view scroll-x="true" enable-flex="true">
					<view class="scroll">
						<view class="scroll-item">
							<image src="../../../static/images/home/swiper2/Image1.png"></image>
							<image src="../../../static/images/home/swiper2/Image2.png"></image>
							<image src="../../../static/images/home/swiper2/Image1.png"></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="topSales">
			<view class="title">
				<text class="left-word">Top Sales</text>
				<text class="right-word">See All</text>
			</view>
			<view class="list">
				<view class="list-item" v-for="item in goodsList" :key="item.id">
					<image :src="item.imgUrl" mode=""></image>
					<text class="goods-title">{{ item.title }}</text>
					<text class="goods-price">{{ item.price }}</text>
				</view>
			</view>
		</view>
		<view class="topSaleSwiper">
			<view class="list">
				<scroll-view scroll-x="true" enable-flex="true">
					<view class="scroll">
						<view class="scroll-item">
							<image src="../../../static/images/home/swiper3/Category card 1.png"></image>
							<image src="../../../static/images/home/swiper3/Category card 2.png"></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 500,
				height: '', //内容快高度
				iStatusBarHeight: '',
				customHeight: '',
				navigationBarHeight: '',
				navHeight: '',
				halfNavHeight: '',
				marginSwiperHeight: '', //swiper margin高度
				lbtList: [{
						id: 1,
						imgUrl: '../../../static/images/home/swiper/Main Post Card1.png'
					},
					{
						id: 2,
						imgUrl: '../../../static/images/home/swiper/Main Post Card2.png'
					},
					{
						id: 3,
						imgUrl: '../../../static/images/home/swiper/Main Post Card3.png'
					},
					{
						id: 4,
						imgUrl: '../../../static/images/home/swiper/Main Post Card4.png'
					}
				],
				iconList: [{
						id: 1,
						imgUrl: '../../../static/images/home/categories/tops.png',
						bgcColor: '#F0867F',
						title: 'Tops'
					},
					{
						id: 2,
						imgUrl: '../../../static/images/home/categories/beauty.png',
						bgcColor: '#A5E8AB',
						title: 'Beauty'
					},
					{
						id: 3,
						imgUrl: '../../../static/images/home/categories/shoes.png',
						bgcColor: '#E5B986',
						title: 'Shoes'
					},
					{
						id: 4,
						imgUrl: '../../../static/images/home/categories/jeans.png',
						bgcColor: '#89BFF5',
						title: 'Jeans'
					},
					{
						id: 5,
						imgUrl: '../../../static/images/home/categories/bags.png',
						bgcColor: '#88E0D6',
						title: 'Bags'
					}
				],
				goodsList: [{
						id: 1,
						imgUrl: '../../../static/images/home/list/listImg1.png',
						title: 'Adidas Run Gray',
						price: '$ 220'
					},
					{
						id: 2,
						imgUrl: '../../../static/images/home/list/listImg2.png',
						title: 'Croc Handbag',
						price: '$ 1580'
					},
					{
						id: 1,
						imgUrl: '../../../static/images/home/list/listImg3.png',
						title: 'Adidas raglan',
						price: '$ 220'
					}
				]
			}
		},
		methods: {
			//获取内容块高度
			getCurrentSwiperHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					console.log(res);
					console.log(res[0][0].height)
					this.height = 10 + res[0][0].height;
				})
			},
			//获取小程序右上角胶囊高度
			getBarHeight() {
				this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
				//胶囊高度
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				this.customHeight = wx.getMenuButtonBoundingClientRect()
				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.navigationBarHeight = this.customHeight.height + (this.customHeight.top - this.iStatusBarHeight)
				// 总体高度 = 状态栏高度 + 导航栏高度
				this.navHeight = this.navigationBarHeight + this.iStatusBarHeight + 'rpx'
				this.halfNavHeight = (this.navigationBarHeight + this.iStatusBarHeight) / 4 + 'rpx'
				console.log("胶囊高度" + this.iStatusBarHeight);
				console.log("导航栏高度" + this.navigationBarHeight);
				console.log("总体高度" + this.navHeight);
				// this.marginSwiperHeight = (this.navigationBarHeight + this.iStatusBarHeight) * 2 + 20 + 'rpx'
				this.marginSwiperHeight = this.iStatusBarHeight + 54+ 'px'
				
			},
			//页面左上角图标(放大镜)
			onClickLeft() {
				uni.navigateTo({
					url:'/pages/search/search'
				});
			}
		},
		components: {
			
		},
		onShow() {
			uni.pageScrollTo({
				scrollTop: 0, // 滚动到页面的目标位置（单位px）
				duration: 0 // 滚动动画的时长，默认300ms，单位 ms
			});
			this.getCurrentSwiperHeight('.container');
		},
		created() {
			this.getBarHeight();
		}
	}
</script>

<style lang="scss">
	.top {
		display: flex;
		align-items: center;
		// padding-bottom: 30rpx;
		font-size: 32rpx;
		background-color: #fff;

		.search-icon {
			position: absolute;
			left: 5%;
			width: 40rpx;
			height: 40rpx;
			line-height: 40px;
		}

		.text {
			text-align: center;
			font-size: 34rpx;
			font-weight: 400;
			color: #333;
			flex: 1;
		}
	}


	.swiper {
		height: 350rpx;
		margin: 30rpx 20rpx;
		border-radius: 20rpx;

		.swiper-item {
			display: block;
			height: 350rpx;
			line-height: 350rpx;

			.swiper-image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.categories {
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 32rpx 44rpx;

			.left-word {
				color: #515C6F;
				font-size: 40rpx;
			}

			.right-word {
				color: #65DACC;
				font-size: 28rpx;
			}
		}

		.list {
			display: flex;
			justify-content: space-around;
			margin: 0 20rpx;

			.icon {
				text-align: center;

				.icon-item {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-bottom: 20rpx;

					.icons {
						width: 60rpx;
						height: 60rpx;
						margin: 20rpx 0;
					}
				}

				.name {
					color: #515C6F;
				}
			}
		}
	}

	.latestSales {
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 32rpx 44rpx;

			.left-word {
				color: #515C6F;
				font-size: 40rpx;
			}
		}

		.list {
			margin: 0 0 0 20rpx;

			.scroll {
				display: inline-block;
				flex-shrink: 0;

				.scroll-item {
					display: flex;

					image {
						width: 600rpx;
						height: 350rpx;
						margin: 0 15rpx;
						border-radius: 20rpx;
					}
				}
			}
		}
	}

	.topSales {
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 32rpx 44rpx;

			.left-word {
				color: #515C6F;
				font-size: 40rpx;
			}

			.right-word {
				color: #65DACC;
				font-size: 28rpx;
			}
		}

		.list {
			display: flex;
			// justify-content: space-around;
			margin: 0 20rpx;
			height: 270rpx;
			margin-bottom: 60rpx;

			.list-item {
				display: flex;
				flex-direction: column;
				background-color: #FEFEFE;
				width: 33.3%;
				margin: 0 15rpx;
				padding-bottom: 20rpx;
				border-radius: 20rpx;

				image {
					width: 100%;
					height: 130px;
					margin-top: 24rpx;
				}

				.goods-title {
					color: #515C6F;
					font-size: 20rpx;
					margin-left: 30rpx;
				}

				.goods-price {
					color: #222B45;
					font-size: 20rpx;
					margin-top: 10rpx;
					margin-left: 30rpx;
				}
			}
		}
	}

	.topSaleSwiper {
		.list {
			margin: 0 0 0 20rpx;

			.scroll {
				display: inline-block;
				flex-shrink: 0;

				.scroll-item {
					display: flex;

					image {
						width: 640rpx;
						height: 350rpx;
						margin: 0 15rpx;
						border-radius: 20rpx;
					}
				}
			}
		}
	}
</style>